<template>
	<view style="padding: 20rpx;">
		<van-list
		  v-model:loading="loading"
		  :finished="finished"
		  finished-text="没有更多了"
		  @load="onLoad"
		>
		  <view style="display: flex;justify-content: space-between;color: #999;font-size: 12px;">
			  <view>部门出勤率</view>
			  <view style="width: 300rpx;"></view>
			  <view>出勤人数</view>
		  </view>
		  <view v-for="item in list" :key="item" class="item" style="margin-top: 10rpx;display: flex;justify-content: space-between;">
			    <view @click="goto(item.id)">{{item.name}}</view>
			    <view style="width: 300rpx;"><van-progress :percentage="item.cql" /></view>
			    <view>{{item.cqCount}}/{{item.allCount}}</view>
		  </view>
		</van-list>
	</view>
</template>

<script setup>
	import { showToast } from 'vant';
import { ref ,onMounted} from 'vue';
	import { useRoute, useRouter } from 'vue-router'
	 
	 const list = ref([]);
	 const loading = ref(false);
	 const finished = ref(false);
	 const startDate = ref('')
	 const endDate = ref('')
	 const route = useRoute()
	 onMounted(()=>{
		 startDate.value = route.query['startDate']
		 endDate.value = route.query['endDate']
	 })
	 const goto=(id)=>{
	 	window.open('/mobile/heo/attend/#/pages/AttendForPerson/AttendForPerson')
	 }
	 		
	 const onLoad = () => {
	   setTimeout(() => {
	    uni.request({
	    	url: '/mobile/heo/GetDepartOrderList.jsp',
	    	method: 'POST',
	    	header: {
	    		'content-type': 'application/x-www-form-urlencoded'
	    	},
	    	data: {
	    		startDate: startDate.value,
	    		endDate: endDate.value,
	    		
	    	},
	    	success: (res) => {
	    		 const result = res.data;
	    		 if (result.ret === '0') {
	    		 	list.value = result.data
	    		 } 
	    
	    	},
			complete: () => {
				loading.value = true;
				finished.value= true
			}
	    
	    })
	    
	     // 加载状态结束
	   
	 		
	   
	   }, 1000);
	 };
</script>

<style scoped>
	.item{
		display: flex;
		line-height: 100rpx;
		align-items: center;
	}

</style>
